// axios的路由导航守卫 配合Vue-router 实现登录权限功能(在router上设置axios导航守卫)
// 导入Vue-router方法 (在Vue组件内需要 this.$router 组件外直接router 使用即可)
import router from './router/index'
// 导入Vuex(获取其全局token值)
import store from './store/index'
// 导入需要设置的动态路由组件
// import { asyncRoutes } from './router/index'
// 创建一个路径白名单 里面填写的是路径 (允许用户游客模式访问一些内容 比如登录页 404 没必要验证)
const white = ['/login', '/404', '/qita']
// 创建路由导航守卫
router.beforeEach(async (to, from, next) => {
  //! 读取Vuex全局组件 判断是否存在token
  // 从Vuex全局组件中 读取保存的token(储存在getters里面)
  const token = store.getters.token
  console.log(token)
  // 如果存在token
  if (token) {
    // 如果存在token 并且当前在登录页 让其跳转到主页
    if (to.path === '/login') { // to 表示要跳转到哪里去
      next('/')
    } else {
      // 如果不在登录页面上 直接通过 不做处理(因为已经登录访问 无需再跳转)
      // 获取用户的信息(路由菜单信息)
      // 为什么需要判断用户信息是否存在？（我们认为登录系统后已经得到了用户信息）
      // 但是，获取用户信息的流程是异步的，路由访问时，用户信息尚未返回
      if (store.getters.userId) {
        // 如果用户信息存在 不做处理直接通过
        next()
      } else {
        // 如果用户信息不存在 获取用户的信息(调用Vuex里面获取信息的方法)
        await store.dispatch('user/getInfo') // 重新调用Vuex方法获取数据
        // await之后是可以获取用户信息的(用户可以获取的动态路由)
        const menus = store.state.user.userInfo.roles.menus
        // 下一步通过menus控制当前用户的路由权限
        // 根据menus信息从所有的动态路由asyncRoutes中过滤出该用户所拥有的的动态路由信息
        // 通过action过滤用户的路由权限,把路由映射信息存储在store中
        // action的返回值表示当前用户所拥有的的动态路由
        const myRoutes = await store.dispatch('permission/filterAuth', menus) // menus参数是用户拥有的动态路由权限 传递给Vuex进行动态路由筛选
        // 动态配置路由
        // 配置404 因为404是*路由 是全局匹配 要最后导入 先导入静态+动态路由的整合 再导入404
        router.addRoutes([...myRoutes, { path: '*', redirect: '/404', hidden: true }])
        // 继续跳转当前路由
        next({
          ...to,
          // 仅仅保留一个跳转历史（如果动态添加路由了，那么路由需要重新访问一次，这样的话，通样的路径访问的两次，路由历史重复了，不友好，所以可以把这两个合并为一个）
          replace: true
        })
      }
    }
  } else {
    // 如果不存在token 判断是否在白名单中(游客可以访问的路径)
    if (white.includes(to.path)) { // includes()是数组方法 检测是否包含指定内容
      // 在白名单里面，放行通过即可
      next()
    } else {
      // 如果不在白名单里面 跳转到登录页面
      next('/login')
    }
  }
})
